<template>
  <div class="person">
    <h2>情况一：监视【ref】定义的【基本类型】值</h2>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { ref,watch } from 'vue'
  //数据
  let sum = ref(0)
  //方法
  function changeSum() {
    sum.value += 1
  }
  //停止监视，wathc()返回一个函数，调用这个函数，就可以停止监视了  
  // const stopWatsh = watch(sum,(newValue,oldValue)=>{ 
  //   console.log('sum被修改了',newValue,oldValue)
  //   if(newValue > 10) {
  //     stopWatsh()
  //   }
  // })
  
  //监视，情况一：监视【ref】定义的【基本类型】值
  watch(sum,(newValue,oldValue)=>{ 
    console.log('sum被修改了',newValue,oldValue)
  })

</script>
<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


